<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<canvas id="mycanvas" width="1300" height="600"></canvas>
		<script type="text/javascript">
			var canvas = document.getElementById("mycanvas");
			var ctx = canvas.getContext("2d");

			var arcArr = [
				//	    [20,100,5,5,0,"cyan"],
				//	    [20,100,5,10,0,"yellow"],
				//	    [20,100,5,10,5,"red"]
			]
			setInterval(function() {
				//在1500间隔内循环喷出多少个球
				for(var i = 0; i < 30; i++) {
					var vx = (Math.random() * 6) + 2;
					if(Math.random() > 0.5) {
						vx = -vx;
					}

					var vy = (Math.random() * 13) + 5; //5-18内的小数转换为整数
					var r = parseInt(Math.random() * 256);
					var g = parseInt(Math.random() * 256);
					var b = parseInt(Math.random() * 256);
					arcArr.push([650, 300, 10, vx, -vy, "rgb(" + r + "," + g + "," + b + ")"])
						//	    arcArr.push([20,100,10,15,2,"yellow"]);
						//	    arcArr.push([20,100,10,6,7,"blue"]);
						//	    arcArr.push([20,100,10,5,4,"orange"]);
						//	    arcArr.push([20,100,10,2,3,"coral"])
				}
			}, 1500)

			setInterval(function() {
				ctx.fillStyle = "rgba(100,255,0,0.2)";
				ctx.fillRect(0, 0, 1300, 600);
				for(var i = 0; i < arcArr.length; i++) {
					ctx.beginPath();
					ctx.fillStyle = arcArr[i][5];

					ctx.arc(arcArr[i][0], arcArr[i][1], arcArr[i][2], 0, 2 * Math.PI);
					ctx.fill();
					arcArr[i][0] = arcArr[i][0] + arcArr[i][3];

					arcArr[i][1] = arcArr[i][1] + arcArr[i][4];
					arcArr[i][2] = arcArr[i][2] - Math.random() * 0.1;
					arcArr[i][4] = arcArr[i][4] + 0.5;
					if(arcArr[i][2] < Math.random() * 2) {
						arcArr.splice(i, 1);
					}

					//	    	if(arcArr[i][1]>600-arcArr[i][2]){
					//	    		arcArr[i][4]=-arcArr[i][4];
					//	    		arcArr[i][4]=arcArr[i][4]*0.4;
					//	    		arcArr[i][1]=600-arcArr[i][2];
					//	    	}

					//	    	if(arcArr[i][0]>1300-arcArr[i][2]){
					//	    		arcArr[i][3]=-arcArr[i][3];
					//	    		arcArr[i][0]=1300-arcArr[i][2];
					//	    	}
					//	    	
					//	    	if(arcArr[i][0]<arcArr[i][2]){
					//	    		arcArr[i][3]=-arcArr[i][3];
					//	    		arcArr[i][0]=arcArr[i][2];
					//	    	}
				}

			}, 16)
		</script>
	</body>

</html>